<template>
  <div class="video-edit">
    <el-container class="video-container">
      <el-aside class="video-aside">
        <div class="input_video">
          <video-player class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions">
          </video-player>
        </div>
      </el-aside>
      <el-main class="video-main">
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
            <el-form-item label="行业:" prop="industryId">
              <el-select v-model="ruleForm.industryId" placeholder="请选择行业">
                <el-option v-for="industry in industryList" :key="industry.id" :label="industry.industryName"
                           :value="industry.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类:" prop="categoryId">
              <el-select v-model="ruleForm.categoryId" placeholder="请选择分类">
                <el-option v-for="category in categoryList" :key="category.id" :label="category.categoryName"
                           :value="category.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称:" prop="productName">
              <el-input v-model="ruleForm.productName"></el-input>
            </el-form-item>
            <el-form-item label="投放平台:" prop="platformId">
              <el-select v-model="ruleForm.platformId" placeholder="请选择流量平台">
                <el-option v-for="platform in platformList" :key="platform.id" :label="platform.platformName"
                           :value="platform.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="消耗金额(30天):" prop="consumptionAmount" place-holder="0.0">
              <el-input v-model="ruleForm.consumptionAmount"></el-input>
            </el-form-item>
            <el-form-item label="点击率(30天):" prop="clickRate" place-holder="0.0">
              <el-input v-model="ruleForm.clickRate"></el-input>
            </el-form-item>
            <el-form-item label="转化率(30天):" prop="conversionRate" place-holder="0.0">
              <el-input v-model="ruleForm.conversionRate"></el-input>
            </el-form-item>
            <el-form-item label="完播率(30天):" prop="finishRate" place-holder="0.0">
              <el-input v-model="ruleForm.finishRate"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {getCategoryList, getIndustryList, getVideoDetail, modifyVideo, getPlatformList} from '../api'

export default {
  name: 'VideoEdit',
  data () {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: '',
          src: 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
        }],
        poster: '', //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,//当前时间和持续时间的分隔符
          durationDisplay: true,//显示持续时间
          remainingTimeDisplay: false,//是否显示剩余时间功能
          fullscreenToggle: true  //全屏按钮
        }
      },
      ruleForm: {
        id: '',
        userId: '',
        industryId: '',
        industryName: '',
        categoryId: '',
        categoryName: '',
        productName: '',
        platformId: '',
        platformName: '',
        consumptionAmount: 0.0,
        clickRate: 0.0,
        conversionRate: 0.0,
        finishRate: 0.0
      },
      industryList: [],
      categoryList: [],
      platformList: [],
      rules: {
        industryId: [
          {required: true, message: '请选择行业', trigger: 'blur'}
        ],
        categoryId: [
          {required: true, message: '请选择分类', trigger: 'blur'}
        ],
        productName: [
          {required: true, message: '请输入产品名称', trigger: 'blur'}
        ],
        platformId: [
          {required: true, message: '请选择流量平台', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.getCategoryList()
    this.getIndustryList()
    this.getPlatformList()
  },
  mounted () {
    this.getVideoDetail()
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.modify_video()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$router.push({name: 'videoDetail', params: {videoId: this.ruleForm.id}})
    },

    getIndustryList () {
      getIndustryList().then(res => {
        this.industryList = res.data
      }).catch(err => {
        console.log(err)
      })
    },

    getCategoryList () {
      getCategoryList().then(res => {
        this.categoryList = res.data
      }).catch(err => {
        console.log(err)
      })
    },

    getPlatformList () {
      getPlatformList().then(res => {
        console.log(res)
        this.platformList = res.data
      }).catch(err => {
        console.log(err)
      })
    },

    getVideoDetail () {
      let _this = this
      const videoId = this.$route.params.videoId
      getVideoDetail(videoId).then(res => {
        console.log(res)
        this.ruleForm = res.data
        this.playerOptions.sources[0].src = res.data.videoPath
      }).catch(error => {
        console.log(error)
      })
    },
    modify_video () {
      let _this = this
      let token = _this.$store.getters.token
      let config = {
        headers:
          {
            'Authorization': token
          }
      }
      modifyVideo(this.ruleForm, config).then(res => {
        if (res.data.code === 200) {
          _this.$message.success('修改成功')
          _this.$router.back()
        }
      }).catch(err => {
        _this.$message.error('修改失败')
      })
    }
  }
}
</script>

<style scoped>
.video-edit {
  width: 100%;
  height: 100%;
  background-color: white;
  min-height: 500px;
}

.video-container {
  height: 100%;
  width: 100%;
  min-height: 500px;
}

.video-aside {
  height: 100%;
  width: 50% !important;
  margin: 0;
  padding-top: 50px;
  padding-left: 0;
  min-height: 100px;
}

.video-main {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100px;
}

.input_video {
  width: 80%;
  height: 100%;
}

.demo-ruleForm {
  margin: 0 auto;
  text-align: left;
  padding: 0;
}
</style>
